<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="权限名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getPerimissions">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.permissions" highlight-current-row v-loading="loading" style="width: 100%;">
				<el-table-column prop="name" label="权限名" width="120" sortable>
				</el-table-column>
				<el-table-column prop="url" label="资源路径" width="100" sortable>
				</el-table-column>
				<el-table-column prop="descs" label="描述" width="100" sortable>
				</el-table-column>
				<el-table-column prop="sn" label="唯一标识" width="120" sortable>
				</el-table-column>
				<el-table-column prop="parent.name" label="父权限名字" min-width="180" sortable>
				</el-table-column>
			</el-table>
		</template>

		<el-pagination 
			background 
			@size-change="handleSizeChange" 
			@current-change="handleCurrentChange"
			:current-page="this.query.pageNumber" 
			:page-sizes="[5, 10, 20, 40]" 
			:page-size=this.query.pageSize
			layout="total, sizes, prev, pager, next, jumper" 
			:total=this.pageInfo.total>
		</el-pagination>

	</section>
</template>
<script>
export default {
	data() {
		return {
			query: {
				pageNumber: 1,
				pageSize: 5,
				keyword: ''
			},
			loading: false,
			pageInfo: {
				total: 0,
				permissions: []
			}
		}
	},
	methods: {
		handleSizeChange(val) {
			this.query.pageSize = val;
			this.query.pageNumber = 1;
			this.getPerimissions();
		},
		handleCurrentChange(val) {
			this.query.pageNumber = val;
			this.getPerimissions();
		},
		//获取权限列表
		getPerimissions() {
			this.$http.put('/permission',this.query)
			.then(res=> res.data).then(res=>{
				if(res.code == 200){
					this.pageInfo.permissions = res.data.data.rows
					this.pageInfo.total = res.data.data.total
				}
			})
			.catch(res=>{
				console.log(res);
			})
		}
	},
	mounted() {
		this.getPerimissions();
	}
};

</script>

<style scoped></style>